<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yunfengtai_1.jpg") ?>" alt="云峰台全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yunfengtai_2.jpg") ?>" alt="勇气乐园项目" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yunfengtai_3.jpg") ?>" alt="农耕文化体验" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">基地介绍</h3>
                    <div class="text-gray-600 space-y-4">
                        <p class="text-indent-8">&emsp;&emsp;云峰台 GRIT 基地位于浏阳市蕉溪镇，距浏阳市 30 公里，占地面积 600 亩，自然风景优美。乾隆皇帝曾题诗 “奇山胜景，天然仙境，真为概赏，岂不美哉” ，也曾荣获 “全国体验教育培训先进单位”、“浏阳焦溪乡 2016 年度产业发展先进单位” 的称号。</p>
                    </div>

                    <h3 class="text-xl font-bold text-gray-800 mb-2 mt-6">课程介绍</h3>
                    <div class="text-gray-600 space-y-4">
                        <p class="text-indent-8">&emsp;&emsp;基地内拥有青少年性格教育培训场、成人拓展培训场、坚毅性格培养勇气乐园、登山祈福圣地、趣味滑草、丛林穿越、镭战 CS、水上圆木桥、飞夺泸定桥、搭板过桥、愤怒的小鸟、浑水摸鱼、大型活动 / 篝火晚会草坪、户外烧烤、星空露营等项目。秉承 “大自然是最好的课堂” 为核心理念，以 “培养坚毅性格” 为宗旨。</p>
                        <p>&emsp;&emsp;最大推荐接待量：[X]人</p>
                        <p>&emsp;&emsp;课程一览：农耕文化体验、户外拓展、自然探索、手工制作、团队协作等。</p>
                    </div>
                </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 坚毅性格培养 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 坚毅性格培养</h4>
                    <p class="text-gray-600">&emsp;&emsp;通过户外拓展、勇气挑战等项目，帮助学生克服困难，培养坚毅不拔的性格和勇于挑战的精神。</p>
                </div>
                <!-- 农耕文化体验 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 农耕文化体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;提供画草帽、竹篾扇子制作、蚕茧工艺品、缫丝、中草药香包等农耕文化体验项目，让学生了解传统手工艺和农耕知识。</p>
                </div>
                <!-- 多样化户外项目 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 多样化户外项目</h4>
                    <p class="text-gray-600">&emsp;&emsp;趣味滑草、真人CS、丛林穿越等丰富的户外项目，让学生在亲近自然的过程中锻炼身体，增强团队协作能力。</p>
                </div>
            </div>

            <!-- 一日研学课程安排 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h2 class="text-2xl font-bold text-gray-800 mb-4">【云峰台研学之旅】</h2>
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse">
                        <colgroup>
                            <col style="width: 15%;">
                            <col style="width: 40%;">
                            <col style="width: 35%;">
                        </colgroup>
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">活动安排</th>
                                <th class="text-left border border-gray-300 py-3 px-4 font-bold">活动内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">08:30</td>
                                <td class="border border-gray-300 py-3 px-4">学校集合出发</td>
                                <td class="border border-gray-300 py-3 px-4">乘车前往云峰台GRIT基地</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">08:30 - 09:50</td>
                                <td class="border border-gray-300 py-3 px-4">集合开营</td>
                                <td class="border border-gray-300 py-3 px-4">开营成立各组织小组，开营律动</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">09:55 - 10:55</td>
                                <td class="border border-gray-300 py-3 px-4">画草帽/竹篾扇子/蚕茧工艺品/缫丝/中草药香包/制作卡通航天员<br>（根据学生年龄段安排体验一个课程）</td>
                                <td class="border border-gray-300 py-3 px-4">走出课室，走进农耕文化，了解农耕知识，制作手工艺品</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">11:00 - 11:40</td>
                                <td class="border border-gray-300 py-3 px-4">趣味滑草</td>
                                <td class="border border-gray-300 py-3 px-4">释放天性，在亲近大自然的过程中，增加学生的胆量，锻炼学生的能力</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">11:45 - 12:45</td>
                                <td class="border border-gray-300 py-3 px-4">午餐（学生自备），休息调整</td>
                                <td class="border border-gray-300 py-3 px-4">-</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">12:50 - 13:50</td>
                                <td class="border border-gray-300 py-3 px-4">真人CS/勇气乐园/水上闯关<br>（根据学生年龄段安排体验一个课程）</td>
                                <td class="border border-gray-300 py-3 px-4">通过户外拓展项目体验，增强学生的身体素质，磨炼他们的意志</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">13:55 - 14:55</td>
                                <td class="border border-gray-300 py-3 px-4">愤怒的小鸟/钻木取火/一米菜园/户外拓展<br>（根据学生年龄段安排体验一个课程）</td>
                                <td class="border border-gray-300 py-3 px-4">刺激有趣的闯关项目充满了趣味性和新鲜感，能让孩子们在这过程中强化心智，锻炼胆量</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">14:30 - 15:20</td>
                                <td class="border border-gray-300 py-3 px-4">射箭/丛林穿越/自制水火箭/植物书签<br>（根据学生年龄段安排体验一个课程）</td>
                                <td class="border border-gray-300 py-3 px-4">同学们排成一列，面对前方靶子，端正站姿，一手握弓一手将箭搭在弦上，举弓，将弦拉满，凝神静气，瞄准靶，蓄势待发</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-300 py-3 px-4 text-center">15:20 - 16:10</td>
                                <td class="border border-gray-300 py-3 px-4">集合上车，清点人数，乘车返回学校</td>
                                <td class="border border-gray-300 py-3 px-4">-</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-gray-600 italic">
                    <p>注：以上所有课程会根据天气、季节当天基地实际情况进行相应调整。</p>
                </div>
            </div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">同学们，云峰台的精彩研学之旅等待着你们的参与！在这里，你们可以挑战自我、磨炼意志、亲近自然、体验农耕文化，收获知识和成长。快来一起开启这场难忘的研学冒险吧！</p>
            </div>
        </div>
    </div>

    <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['教育性', '互动性', '实践性', '创新性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(51, 153, 102, 0.2)',
            borderColor: 'rgba(51, 153, 102, 1)',
            borderWidth: 2,
            data: [8, 8, 9, 8, 9] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>